<script setup lang="ts">
import {ref} from 'vue'
import router from "@/router";
import AnalyesAPI from "@/api/system/analyes";
import {useAnalyseStore} from "@/store/modules/analyse";
import {getUserInfo} from "@/utils/auth";

const form = ref({})
const total = ref(0);
const analyseStatusPage = useAnalyseStore()
const userInfo = JSON.parse(getUserInfo())

const tableList = ref([])
const queryParams = ref({
  page: 1,
  limit: 10,
  task_name: '',
});

const stepStatus = ref({
  1: '待分派',
  2: '已分派',
  3: '草稿',
  4: '待接收',
  5: '部分接收',
  6: '已接受',
})

onMounted(() => {
  getAnalyesList()
});

// 分页
const handleQuery = () => {
  AnalyesAPI.getPage(queryParams.value).then(res => {
    tableList.value = res.list
    total.value = res.count
  })
}

// 查询分析单数据
function getAnalyesList() {
  AnalyesAPI.getPage(queryParams.value).then(res => {
    tableList.value = res.list
    total.value = res.count
  })
}

// 搜索分析单
function handleSearch() {
  AnalyesAPI.getPage(queryParams.value).then(res => {
    tableList.value = res.list
    total.value = res.count
  })
}

// 更改颜色
function getQcStatusClass(status) {
  switch (status) {
    case 1:
      return 'status-wait-dispatch'; // '待分派'状态的类
    case 2:
      return 'status-dispatched'; // '已分派'状态的类
    case 3:
      return 'status-draft'; // '草稿'状态的类
    default:
      return '';
  }
}

// 更改颜色
function getStatusClass(status) {
  switch (status) {
    case 1:
      return 'status-wait-dispatch'; // '待分派'状态的类
    case 2:
      return 'status-dispatched'; // '已分派'状态的类
    case '3':
      return 'status-draft'; // '草稿'状态的类
    default:
      return '';
  }
}

const handleJumpPage = (item: any) => {
  console.log(analyseStatusPage)
  analyseStatusPage.analyseStatusForm.status = item.id
  analyseStatusPage.analyseStatusForm.qcStatus = item.qc_id
  analyseStatusPage.analyseStatusForm.test_category = item.test_category
  router.push(
      {path: '/analyse/analyse-details'}
  )
}

const handleJumpApportionPage = (row: any) => {
  analyseStatusPage.analyseStatusForm.status = row.id
  analyseStatusPage.analyseStatusForm.test_category = row.test_category
  router.push({path: '/analyse/analyse-apportion'})
}

</script>

<template>
  <div class="card">
    <el-card class="box-card">
      <el-form ref="form" :model="queryParams" label-width="20px">
        <el-row>
          <el-col :span="4">
            <el-form-item label="">
              <el-input v-model="queryParams.task_name" placeholder="任务名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="">
              <el-input v-model="queryParams.task_sn" placeholder="任务编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="">
              <el-select v-model="queryParams.status" placeholder="分析任务状态">
                <el-option label="待分派" value="1"></el-option>
                <el-option label="已分派" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--          <el-col :span="4">-->
          <!--            <el-form-item label="">-->
          <!--              <el-select v-model="form.region" placeholder="质控单状态">-->
          <!--                <el-option label="区域一" value="shanghai"></el-option>-->
          <!--                <el-option label="区域二" value="beijing"></el-option>-->
          <!--              </el-select>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->
          <el-col :span="4">
          </el-col>
          <el-col :span="4">
            <div class="card-button">
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button>重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!--    表格内容-->
    <el-card class="box-card" style="margin-top: 30px">
      <div class="card-button" style="margin-bottom: 30px">
<!--        <el-button>导出</el-button>-->
<!--        <el-button>打印</el-button>-->
      </div>
      <el-table style="width: 100%" border :data="tableList">
        <el-table-column prop="date" label="序号" align="center">
          <template #default="scope">{{ scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column prop="name" label="操作" align="center">
          <template #default="scope">
            <el-dropdown>
              <el-button type="primary" size="small">
                操作
                <el-icon class="el-icon--right">
                  <arrow-down/>
                </el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="handleJumpPage(scope.row)">查看详情</el-dropdown-item>
                  <el-dropdown-item v-if="scope.row.status === 1 && userInfo.userinfo.group.split(',').includes('29')"
                                    @click="handleJumpApportionPage(scope.row)">
                    去分派
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
        <el-table-column prop="task_name" label="任务名称" align="center">
        </el-table-column>
        <el-table-column prop="task_number" label="任务编号" align="center">
        </el-table-column>
        <el-table-column prop="order_number" label="关联委托单号" align="center">
        </el-table-column>
        <el-table-column prop="task_address" label="采样地点" align="center">
        </el-table-column>
        <el-table-column prop="address" label="分析任务状态" align="center">
          <template #default="scope">
              <span :class="getStatusClass(scope.row.status)">
                {{ stepStatus[scope.row.status] || '' }}
              </span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="质控单状态" align="center">
          <template #default="scope">
            <span :class="getQcStatusClass(scope.row.qc_status)">
            {{
                scope.row.qc_status == '1' ? '待下发' : scope.row.qc_status == '2' ? '已下发' : scope.row.qc_status == '3' ? '已取消' : ''
              }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div class="pagination">
      <pagination
          v-if="total > 0"
          v-model:total="total"
          v-model:page="queryParams.page"
          v-model:limit="queryParams.limit"
          @pagination="handleQuery"
      />
    </div>
  </div>

</template>

<style scoped lang="scss">
.card {
  padding: 20px 25px;
}

.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}

.status-wait-dispatch {
  color: #FF7E00; /* '待分派'：绿色文字 */
}

.status-dispatched {
  color: #34BE06; /* '已分派'：蓝色文字 */
}

.status-draft {
  color: #cccccc; /* '草稿'：橙色文字 */
}

</style>
